<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else>
		<!-- <x-scroll :fixed="true" :isNav="false" @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="_freshing" :offset='70'> -->
			<view class="list wap"  v-if="Array.isArray(list) && list.length > 0">
				<view class="item" v-for="item in list" :key="item.BrowseUserID"  @click="view(item)">
					<block>
						<view class="cover" >
							<image  :src="item.HeadImgUrl" mode="aspectFill" />							
						</view>
						<view class="main">
							<view class="user_cell">
								<view class="name hiddenText">{{item.Name ? $util.entitiesToUtf16(item.Name) :''}}</view>
								<view class="vip_box" v-if="item.UserType != '普通用户'">
									<image mode="widthFix" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png"></image>
								</view>								
							</view>
							<view class="time">{{getTime(item.CreateTime)}}</view>
						</view>
					</block>
					<view class="right">
						<view class="btn_sm_1" style="opacity: 0;">看看是谁</view>
					</view>
				</view>
				<view style="height: 60rpx;"></view>
			</view>
			<block v-else>
				<u-empty mode="list" width="100" height="100"
					icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
					iconSize="32" text="暂无足迹记录"></u-empty>
			</block>
		<!-- </x-scroll> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isLook: false,
				isMore:false,
				load: false,
				_freshing: true,
				list: [],
				user: [],
				PageIndex: 1, //页码
				PageSize: 15, //请求条数
			}
		},
		onShow() {

		},
		onPullDownRefresh() {
			this.onRefresh()
		},
		onReachBottom() {
			this.scrolltolower()
		},
		async onLoad() {
			
			//刷新用户状态
			this.upDateInfo();
			
			//this.getUserInfo();
			let u = uni.getStorageSync('user');
			if (u.UserType == '普通用户' ) {
				this.isLook = false;
			} else {
				this.isLook = true;
			}
			
			this.init();
		
			let v_d = await this.$api.post('/Member/BrowseMySelfNum');

			if(v_d.data){
			
				uni.setStorageSync('BrowserNum',v_d.data);
			}
		},
		methods: {
			async upDateInfo() {
				let res = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').UserID
				});
				let user = res.data;
				user.UserID = res.data.ID;
				uni.setStorageSync('user', user);
				this.$store.commit('setUser', user);
			
			},
			clearRepetition(arr, key = "ID") {
				let newArr = [];
				arr.forEach(item => {
					let index;
					let check = newArr.every((newItem, i) => {
						if (item[key] !== newItem[key]) {
							index = -1;
							return true;
						} else {
							index = i;
			
							return false;
						}
					})
					if (check) {
						newArr.push(item);
					} else {
						newArr.splice(index, 1, item);
					}
			
				})
				console.log('newArr', newArr)
				return newArr;
			},
			onRefresh() {
				this.PageIndex = 1;
				this.load = false;
				this.list=[]
				this.init();
			},
			//滚动到底部触发
			async scrolltolower() {
				if (this.isMore) {
					this.PageIndex++;
					this.init();
				}else{
					// this.$pv.msg('到底啦~')
				}
			},
			
			async getUserInfo() {
				let u = uni.getStorageSync('user');
				let res = await this.$api.post('User/GetUserInfo', {
					ID: u.UserID
				});
				this.user = res.data;

			},

			async view(obj) {				
				this.nav_to(`/pages/user/user_visitor?id=${obj.BrowseUserID}&ub=-1`);
				return
				if (this.isLook) {
					// let res = await this.$api.post('Friend/ReadMyBrowseUser', {
					// 	ID: obj.ID
					// });
					
					// this.list.forEach((item, index) => {
					// 	if (item.ID == obj.ID) {
					// 		item.IsRead = 1;
							
					// 		this.list.splice(index, 1, item);
					// 	}
					// });
					
					console.log('============'+obj.UserID)
					
					this.nav_to(`/pages/user/user_visitor?id=${obj.UserID}&ub=-1`);
				} else {
					let _this = this;
					uni.showModal({
						title: '温馨提示',
						content: '开通月卡或年卡会员即可查看看过您的人',
						confirmText: "去开通",
						success: function(res) {
							if (res.confirm) {
								_this.nav_to('/pages/user/apply_member');
							} else if (res.cancel) {

							}
						}
					});
				}

			},
			async init() {
				let u = uni.getStorageSync('user');
				let res = await this.$api.post('/Member/MyViewUser',{
					PageIndex: this.PageIndex,
					PageSize: this.PageSize
				});
				if(res.code==0) {
					uni.stopPullDownRefresh()
					this.load = true;
				}else{
					this.$pv.msg(res.message)
					return
				}
				
				let list1 = this.list.concat(res.data)
				// this.list = list1.filter((item,index)=>{
				// 	return item.UserID != u.UserID
				// })
				this.list = list1
				// this.list = this.clearRepetition(this.list, "ID");
				
				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
				
				
				
			},
		},
		computed: {
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
	.list {
		.item {
			display: flex;
			height: 140rpx;
			align-items: center;
			justify-content: space-between;

			.cover {
				height: 88rpx;
				width: 88rpx;
				border-radius: 50%;
				overflow: hidden;
				position: relative;

				image {

					height: 100%;
					width: 100%;
				}
				
				
			}
			.right{
				position: relative;
				.red {
					display: flex;
					height: 16rpx;
					width: 16rpx;
					background: #fc4b65;
					position: absolute;
					top: 5rpx;
					right: 5rpx;
					border-radius: 200rpx;
				}
			}

			.main {
				// padding-left: 10rpx;
				margin-left: 15rpx;
				// flex: 1;
				width: 61%;
				.user_cell{
					display: flex;
					align-items: center;
					.name {
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						margin-bottom: 10rpx;
						max-width: 72%;
					}
					.vip_box{
						margin-bottom: 10rpx;
						image{
						  width: 76rpx;
						  width: 90rpx;
							height: 20rpx;
							display: block;
						  margin-left: 10rpx;
						}
					}
				}
				
				
				.time{
					font-size:24rpx;
					color:#999999;
				}
			}

			.btn_sm_1 {
				text-align: center;
				line-height: 56rpx;
				height: 56rpx;
				width: 160rpx;
				border-radius: 28rpx;
				border: 1rpx solid #999999;
				color: #0D0D0D;
				font-size: 28rpx;
			}
		}
	}

	.islook {
		.item {
			.cover {
				image {
					filter: blur(7px);
					height: 100%;
					width: 100%;
				}
			}

			.main {
				.name {
					filter: blur(4px);
				}
			}
		}
	}
</style>